
import { Component, OnInit, ViewChild } from '@angular/core';
import 'rxjs/add/operator/map';
import { CommService } from '../../comm/comm.service';
import { ReportUrls } from '../../comm/report.urls.conf';
import { SubArea } from '../../model/report/sub-area';
import { QueryModel } from '../../model/report/query-model';
import 'rxjs/add/operator/toPromise';
declare const $: any;
import { Observable } from 'rxjs/Rx';
import { TVResource } from 'app/ptpmc/model/comm/tv-resource';
import { DxDropDownBoxComponent } from 'devextreme-angular';
import { ChartOptionCreater } from '../../model/comm/chart-option-creater';
@Component({
    selector: 'app-report-pun',
    templateUrl: './wct.component.html',
    styleUrls: ['./wct.component.scss']
})

export class WCTComponent implements OnInit {
    title = '平均CT';
    public chartOption: any;
    public wctList: any[];
    constructor(private commServices: CommService) {
    }
    //组件初始化
    ngOnInit() {
        this.commServices.initDatePicker($('#DateTimeRange'), 'YYYY-MM-DD HH:mm');
        this.shiftItems = this.commServices.shifts;
        this.shiftSelected = this.shiftItems[0];
        this.subAreaItems = this.commServices.getSubAreas();
        this.subAareSelected = this.subAreaItems[0];
        this.equipemntItems = this.commServices.getTVResourceBySubArea(this.subAreaItems[0].subArea);
        this.equipmentSelected = this.equipemntItems;
    }
    /*生产线 - 班次*/
    public subAreaItems: SubArea[];
    public shiftItems: any[];
    public equipemntItems: TVResource[] = [];
    public subAareSelected: any;
    public shiftSelected: any;
    public equipmentSelected: TVResource[];
    public minValue = 0;
    public items: any[];
    @ViewChild('dddb') dddb: DxDropDownBoxComponent;
    clearEquipmentSelected() {
        this.equipmentSelected = [];
    }
    equipmentSelectedOk() {
        this.dddb.instance.close();
    }

    onSubAreaSelectedChange(subArea: any): void {
        this.equipemntItems = this.commServices.getTVResourceBySubArea(subArea.value.subArea);
        this.equipmentSelected = this.equipemntItems;
    }
    /**
     * 获取表格数据
     */
    getReportData(): void {
        debugger
        const queryModel: QueryModel = new QueryModel();
        queryModel.dateTimeRange = this.getTime('DateTimeRange');
        queryModel.querySubAreaIds = [this.subAareSelected.subArea];
        queryModel.queryResourceIds = this.equipmentSelected.map(e => e.equipment);
       // queryModel.minValue = this.minValue;
        this.commServices
            .getList(queryModel, ReportUrls.WCTSUrl)
            .subscribe(model => {
                if (model.resultCode === 200) {
                    debugger
                    this.wctList = model.data;
                    //this.items = model.data.list;
                    this.chartOption = this.createOption(this.wctList, model.data);
                } else {
                    console.log(model.resultCode + ',' + model.resultMessage);
                }
            });
    }

    getTime(id: any): String {
        const timerange: String = $('#' + id).val();
        return timerange;
    }
     /**ECharts图表相关*/
     chartsMap = new Map<number, any>();
     onChartInit(index: number, echartsIntance: any): void {
         this.chartsMap.set(index, echartsIntance);
         Observable.fromEvent(window, 'resize')
             .debounceTime(100) // 以免频繁处理
             .subscribe((event) => this.chartsMap.forEach((v, k) => v.resize()));
     }

    
     createOption(list: any[], mode: any) {

        const x = new Array();
        const z = new Array();
        

        //const data = ['Working Pace', '目标'];

        list.forEach(e => {
            x.push(e.equipment );
        });
        // list.forEach(e => {
        //     z.push(e.equipment);
        // });

        const y = list.map(e => e.aveCT);

        const series: any[] = [{
            name: '平均CT',
            data: y,
            type: 'bar',
            itemStyle: {
                normal: {
                    color: '#63B8FF'
                },
            },
        }];

       

        return {
            legend: {
                //data: data
            }, tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            }, grid: {
                top: '10%',
                left: '1%',
                right: '5%',
                containLabel: true
            },
            xAxis: [
                {
                    //boundaryGap: true,
                    // offset:-25,
                    type: 'category',
                    data: x,
                    axisLabel: {

                        interval: 0, // 横轴信息全部显示
                        rotate: -30, // -30度角倾斜显示
                        textStyle: {
                            fontSize: 8,
                        }
                    }
                },
                
            ],


            yAxis: {
                type: 'value'
               
               
            },
            series: series,
            dataZoom: [
                {
                    show: true,
                    start: 0,
                    end: 100
                },
                {
                    type: 'inside',
                    start: 0,
                    end: 100
                },
                {
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 30,
                    height: '90%',
                    showDataShadow: false,
                    left: '100%'
                }
            ],
        };
    }
       
    
}
